<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>php学习笔记[049]</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="show"><span>049 ajax打造等待进度条(二)</span></div>
<?php include 'include/top.php';?>
<div class="text">
<b>readyState</b>
<strong>readyState</strong>有5中状态，分别代表<br />
0：请求未初始化，还没有调用 open()。<br /> 
1：请求已经建立，但是还没有发送，还没有调用 send()。<br /> 
2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。<br /> 
3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。<br />
4：响应已完成；您可以获取并使用服务器的响应了。<br />
<b>status</b>
<strong>status</strong>是服务器的状态主要的返回有<br />
100——客户必须继续发出请求<br />
101——客户要求服务器根据请求转换HTTP协议版本<br />
200——成功<br />
201——提示知道新文件的URL<br />
300——请求的资源可在多处得到<br />
301——删除请求数据<br />
404——没有发现文件、查询或URl<br />
500——服务器产生内部错误<br />
</div>
<div class="text">
<b>sleep()</b>
php中<strong>sleep()</strong>函数是等待*秒后继续运行。我们把这些函数综合起来做个例子来实现进度条！<br />
我们在file文件夹中建立一个s049_1.js的文件里面加入下面的代码
<div class="code">
// JavaScript Document<br />
var xmlHttp;	//定义xmlHttp这个变量<br />
function s_xmlhttprequest()	//建立实例化函数<br />
{<br />
if(window.ActiveXObject)	//判断是否支持微软的控件<br />
{<br />
xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');	//实例化 <br />
}<br />
else if(window.XMLHttpRequest)	//判断是否支持标准浏览器的js解译<br />
{<br />
xmlHttp = new XMLHttpRequest();	//实例化函数<br />
}<br />
}<br />
function fun(url)	//建立fun函数<br />
{<br />
s_xmlhttprequest();	//引入实例化函数<br />
xmlHttp.open(&quot;GET&quot;,&quot;file/s049_2.php?con=&quot;+url,true);	//打开ajax<br />
xmlHttp.onreadystatechange= byphp;<br />
xmlHttp.send(null); <br />
}<br />
function byphp()<br />
{<br />
if (xmlHttp.readyState==1)//如果页面状态是1<br />
{<br />
document.getElementById('id').innerHTML = 'loading...';//输出下面的字符<br />
}<br />
else if(xmlHttp.readyState==4)//如果状态为4了<br />
{<br />
if(xmlHttp.status==200)//如果服务器状态为完成<br />
{<br />
var byphp = xmlHttp.responseText;<br />
document.getElementById('id').innerHTML = byphp;<br />
}<br />
<br />
}<br />
}<br />
</div>
我们建立一个s049_2.php文件，在里面加入下面的代码：<br />
<div class="code">&lt;?php<br />
  for($i=0;$i&lt;3;$i++)<br />
  {<br />
  sleep(1);<br />
  echo $_GET['con'].'.'.$i.'&lt;br /&gt;';<br />
  }<br />
  echo '&lt;br&gt;';<br />
  ?&gt;</div>
 我们再本页面使用这个ajax：
 <div class="code">&lt;script type=&quot;text/javascript&quot; src=&quot;file/s049_1.js&quot;&gt;&lt;/script&gt;<br />
   &lt;span onclick=&quot;fun('A')&quot;&gt;A&lt;/span&gt;<br />
   &lt;span onclick=&quot;fun('B')&quot;&gt;B&lt;/span&gt;<br />
   &lt;span onclick=&quot;fun('C')&quot;&gt;C&lt;/span&gt;&lt;br /&gt;<br />
   &lt;SPAN id=&quot;id&quot;&gt;&lt;/SPAN&gt;<br />
 </div>
我们来看下面的效果
<div class="effect">
<script type="text/javascript" src="file/s049_1.js"></script>
<span onclick="fun('A')">A</span>
<span onclick="fun('B')">B</span>
<span onclick="fun('C')">C</span><br />
<SPAN id="id"></SPAN>
</div>
</div>
</body>
</html>
